<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <table id="employeeTable" border="1">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td>
                <a href="javascript:;" class="del">Delete</a>
            </td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td>
                <a href="javascript:;" class="del">Delete</a>
            </td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>10000</td>
            <td>
                <a href="javascript:;" class="del">Delete</a>
            </td>
        </tr>
    </table>

    <div id="formDiv">

        <h4>添加新员工</h4>

        <table border="1">
            <tr>
                <td class="word">name: </td>
                <td class="inp">
                    <input type="text" name="empName" id="empName" />
                </td>
            </tr>
            <tr>
                <td class="word">email: </td>
                <td class="inp">
                    <input type="text" name="email" id="email" />
                </td>
            </tr>
            <tr>
                <td class="word">salary: </td>
                <td class="inp">
                    <input type="text" name="salary" id="salary" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton">
                            Submit
                        </button>
                </td>
            </tr>
        </table>

    </div>

    <script>
        addEmpButton.onclick = function() {
                //1.获取表单元素的value
                let empNameVal = empName.value;
                let emailVal = email.value;
                let salaryVal = salary.value;
                //2.创建新的tr
                let tr = document.createElement("tr");
                tr.innerHTML = ` <td>${empNameVal}</td>
            <td>${emailVal}</td>
            <td>${salaryVal}</td>
            <td>
                <a href="javascript:;">Delete</a>
            </td>`;
                //3.table添加
                employeeTable.querySelector("tbody").appendChild(tr);
            }
            //删除
        employeeTable.onclick = function(event) {
            console.log(event)
            console.log(event.target.className == "del")
                // console.log(event.target.)
                // if (confirm("确定删除嘛？")) {
                //     event.target.parentElement.parentElement.remove()
                // }
        }
    </script>
</body>

</html>